<script setup>
import { ref,onBeforeMount } from "vue"
import { reactive, toRefs } from 'vue'
import { UploadFilled,SwitchButton } from '@element-plus/icons-vue'
import axios from "axios";
import router from "@/router";
import { useRouter } from 'vue-router';
import { ElMessage } from "element-plus";
import { shrinkImage } from "shrinkpng";


const state = reactive({
  fit: 'cover'
})

onBeforeMount(() => {
axios({
    method:'get',
    url:'/user/me',  
})
.then(function(response) {
    if(response.data.status) {
    nickname.value = response.data.data.nickname
    url.value = response.data.data.avatar
    localStorage.setItem("role",response.data.data.role)
    } else {
        ElMessage.error("加载用户信息失败")
    }
})
})


const userouter = useRouter();
var submitAvatar = ref(true)//
const avatarVisible = ref(false)//
const nicknameVisible = ref(false)
const avatarLoading = ref(false)//
const avatarUrl = ref('')//
const changeNickname = ref('')//
const avatarFile = ref()//
const nickname = ref('麦乐鸡')
// const url = ref('')
// const fit = ref('cover')

function changeNicknameVisible() {
    if(nicknameVisible.value) {
        nicknameVisible.value = false;
    } else {
        nicknameVisible.value = true;
    }
}

function changeAvatarVisible() {
    if(avatarVisible.value) {
        avatarVisible.value = false
    } else {
        avatarVisible.value = true
    }
}//

function uploadAvatar() {
    axios({
        method:"post",
        url:"/user/uploadAvatar",
        data:{
            image:avatarFile.value
        },
        headers:{
            'Content-Type':'multipart/form-data'
        }
    })
    .then(function(response) {
        if(response.data.status) {
            url.value = avatarUrl.value
        } else {
            ElMessage.error("上传失败")
        }
    })
    .then(function() {
        submitAvatar.value = true
        avatarUrl.value = ''
        avatarVisible.value = false
    })
    .catch(error => {
        ElMessage.error("你传入的图片可能过大")
    });
    
}//

function cancelAvatar() {
    console.log("取消成功")
    submitAvatar.value = true
    avatarUrl.value = ''
    avatarVisible.value = false
}//

function avatarBeforeUpload() {
    avatarLoading.value = true
}//

async function avatarChange(file) {
    avatarLoading.value = true;
    const _file = await shrinkImage(file.raw, {
        quality: 60
      });
      console.log(_file)
    avatarFile.value = _file
    avatarUrl.value = getObjectURL(_file)
    console.log(avatarUrl.value)
    submitAvatar.value = false
    avatarLoading.value = false

}//

function getObjectURL(file) {
        var url = null ;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    }//

function saveChangeName() {
axios({
    method:"post",
    url:"/user/updateNickname",
    data:{
        nickname:changeNickname.value
    },
    headers:{
        'Content-Type':'application/x-www-form-urlencoded'
    }
})
.then(function(response) {
    if(response.data.status) {
        nickname.value = changeNickname.value
        changeNickname.value = ""
        nicknameVisible.value = false;
    } else{
        ElMessage.error("修改的名称不允许和原名称相同")
    }
})
}

function exitAccount() {
    userouter.push("/")
    localStorage.removeItem("Authorization")
}

function toHeader() {
    userouter.push("/Message");
}

const url = ref("https://lost-andfound.oss-cn-shanghai.aliyuncs.com/picture/assets/user.jpg")
const fit = ref('cover')

</script>
<template>
<div class="banner">
        <div style="height: 80px;display: inline-block;">
            <img src="../assets/sdu_icon.png" class="sdu_icon" alt="logo">
            <img src="../assets/sdu_name.png" class="sdu_name" alt="">
            <div class="link_div">
                <span @click="toHeader" class="link_item">首页</span>
            </div>
        </div>

        <div class="avatar-nickname-exit">
            <el-popover placement="bottom" :width="200" :visible="avatarVisible">
                <template #reference>
                    <!-- <el-avatar :size="50" :fit="fit" :src="url" class="avatar" @click="changeAvatarVisible"/> -->
                    <el-image style="width: 50px; height: 50px;border-radius: 50px;" :src="url" :fit="fit" class="avatar" @click="changeAvatarVisible"/>
                </template>

                <div v-if="submitAvatar" v-loading="avatarLoading" >
                    <el-upload
                    accept="image/*"
                    :show-file-list="false"
                    :on-change="avatarChange"
                    :on-before-upload="avatarBeforeUpload"
                    drag
                    :auto-upload="false"
                    >
                    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                少于4M的图片文件
                            </div>
                        </template>
                    </el-upload>
                </div>

                <div v-if="!submitAvatar">

                    <div class="avatarBack" :style="{'background-image': 'url(' + avatarUrl + ')'}">

                        <div class="avatarButton">
                            <button class="btn btn-circle btn-ok" @click="uploadAvatar">
                                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M939.717 106.665l-304.049 324.529-78.769 85.071-225.28 240.246-123.668-115.003-129.182-121.305-78.769 84.283 129.969 121.305 33.083 31.508 129.969 121.305 44.111 40.96 304.049-324.529 78.769-85.071 304.049-324.529-84.283-78.769z" fill="#ffffff"></path>
                                </svg>
                            </button>
                            <span style="padding-left: 20px;"></span>
                            <button class="btn btn-circle btn-gray" @click="cancelAvatar">
                                <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M597.333333 512l284.444445 284.444444c2.929778 3.328 2.929778 22.357333 0 28.444445l-56.888889 56.888889c-6.087111 2.929778-25.116444 2.929778-28.444445 0L512 597.333333 227.555556 881.777778c-3.328 2.929778-22.328889 2.929778-28.444445 0l-56.888889-56.888889c-2.929778-6.087111-2.929778-25.116444 0-28.444445l284.444445-284.444444L142.222222 227.555556c-2.929778-3.328-2.929778-22.328889 0-28.444445l56.888889-56.888889c6.115556-2.929778 25.116444-2.929778 28.444445 0l284.444444 284.444445L796.444444 142.222222c3.328-2.929778 22.357333-2.929778 28.444445 0l56.888889 56.888889c2.929778 6.115556 2.929778 25.116444 0 28.444445L597.333333 512z" fill="#4a4a4a"></path>
                                </svg>
                            </button>
                        </div>
                    
                    </div>

                </div>
                
            </el-popover>
                
            <el-popover placement="bottom" :width="300" trigger="hover" :visible="nicknameVisible">
                <template #reference>
                    <span class="nickname" @click="changeNicknameVisible">{{ nickname }}</span>
                </template>
                <span style="font-size: 16px">昵称:</span>
                <el-input v-model="changeNickname" style="width: 170px;margin-left: 12px;" />
                <button class="changeName" @click="saveChangeName">保存</button>
                <div class="exit" @click="exitAccount">
                    <el-icon><SwitchButton /></el-icon>
                    <span style="margin-left: 2px">退出登录</span>
                </div>
                
            </el-popover>

            <!-- <button class="exitButton" @click="show">退出登录</button> -->
        </div>
    </div>
</template>
<style scoped>
.avatarButton{
    padding-top: 125px;
    padding-left: 40px;
}

.avatarBack{
    width: 175px;
    height: 175px;
    background-size: 175px 175px;
}

.changeName{
    background-color: skyblue;
    color: white;
    border-radius: 5px;
    border: none;
    width: 50px;
    height: 30px;
    cursor: pointer;
    margin-left: 5px;
    font-size: 16px;
}
.nickname{
    position: relative;
    top: -18px;
    left: 18px;
    color: white;
    font-size: 18px;
    cursor: pointer;
}
.avatar-nickname-exit{
    position: relative;
    right: 40px;
    top: 15px;
    display: inline-block;
}
.avatar{
    cursor: pointer;
}
/* 用于退出按钮的样式 */
.exit{
    cursor: pointer;
    font-size: 18px;
    margin-left: 180px;
    margin-top: 15px;
    /* border: 1px solid black; */
}
/* 用于横幅最初样式和校徽和校名的css */
.banner{
    display: flex;
    justify-content: space-between;
    background-color: #9D0004;
    height: 80px;
    width: 100%;
}
.sdu_name{
    width: 90px;
    margin-left: 10px;
    margin-bottom: 12px;
}
.sdu_icon{
    width: 50px;
    margin-left: 10px;
    margin-top: 15px;
}

/* 用于首页的超连接的css */
.link_item{
    text-decoration: none;
    color: white;
    font-size: 18px;
}
.link_div{
    display: inline-block;
    margin-left: 15px;
    vertical-align: middle;
    height: 70px;
}

/* 按钮展示的css */

.btn {
  --btn-fg: #FFF;
  color: var(--btn-fg) !important;
  border-radius: .4em;
  padding: .3em 0;
  line-height: 1.5em;
  cursor: pointer;
  transition: filter .3s ease-out;
  width: 5em;
  text-align: center;
  font-size: 18px;
  border: 1px solid transparent;
}

.btn-gray {
  background-color: #E8E8E8;
  --btn-fg: #000;
}

.btn-primary {
  background-color: #0AF;
}

.btn-sdu {
  background-color: #9D0004;
}

.btn-upload {
  float: right;
  margin-top: 30px;
  margin-right: 10%;
}

.btn-straight {
  border-radius: .2em;
  width: 6em;
}

.btn-ok {
  background-color: #47c74c;
}

.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(100%) opacity(.5);
}

.btn-circle {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 8px;
  box-shadow: 1px 1px 4px 0 #0003;
}
</style>